<template>
    <div class="products">
        <h2>推荐商品</h2>
        <div class="list">
            <div class="item" v-for="n in 4" :key="n">
                <img src="https://via.placeholder.com/100" />
                <p>商品{{ n }}</p>
            </div>
        </div>
    </div>
</template>

<style scoped>
.products {
    text-align: center;
    padding: 20px;
}

.list {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.item {
    width: 120px;
    margin: 10px;
}

.item img {
    width: 100%;
    border-radius: 8px;
}
</style>
